import styles from './index.less';
import { useIntl, useDispatch, history } from 'umi';
import { Space, Button, Table } from 'antd';
import { useEffect, useState } from 'react';
import request from '@/utils/request';
import { handleAvatarError } from '@/utils';
import CreateAccount from '@/pages/components/createAccount';

function UsermanagementPage() {
  const intl = useIntl();
  const dispatch = useDispatch();

  const columns = [
    {
      title: intl.formatMessage({ id: 'avatar' }),
      width: 150,
      dataIndex: 'avatar',
      render: (text: string, record: any) => (
        <img
          src={record.avatar || ''}
          onError={handleAvatarError}
          alt=""
          className={styles.avatar}
        />
      ),
    },
    {
      title: intl.formatMessage({ id: 'lastname' }),
      dataIndex: 'lastName',
      key: 'lastName',
    },
    {
      title: intl.formatMessage({ id: 'name' }),
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: intl.formatMessage({ id: 'email' }),
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: intl.formatMessage({ id: 'role' }),
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: intl.formatMessage({ id: 'phonenumber' }),
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: intl.formatMessage({ id: 'updateDate' }),
      dataIndex: 'updatedDate',
      key: 'updatedDate',
    },
    {
      title: intl.formatMessage({ id: 'action' }),
      dataIndex: 'action',
      render: (text: string, record: any) => (
        <Button onClick={() => onEdit(record)}>
          {intl.formatMessage({ id: 'edit' })}
        </Button>
      ),
    },
  ];

  const [list, setList] = useState([]);
  const [createVisible, setCreateVisible] = useState(false);

  useEffect(() => {
    getList();
  }, []);

  let userinfo = {};

  try {
    userinfo = JSON.parse(localStorage.getItem('userinfo'));
  } catch (error) {}

  const getList = () => {
    request.get(`/team/get`).then((res) => {
      setList(res.data.userList);
    });
  };

  const handleOpenInviteUsers = () => {
    // dispatch({ type: 'system/changeIUVisible', visible: true });
    setCreateVisible(true);
  };
  const onClose = () => {
    setCreateVisible(false);
  };
  const onSuccess = () => {
    getList();
    setCreateVisible(false);
  };

  const onEdit = (record: any) => {
    if (userinfo.id === record.id) {
      history.push(`/settings/generalinfo`);
    } else {
      history.push(`/settings/generalinfo?id=${record.id}`);
    }
  };

  return (
    <div className={styles.usermanagementpage}>
      <div className={styles.head}>
        <h4 className={styles.title}>
          {intl.formatMessage({ id: 'usermanagement' })}
        </h4>
        <Space>
          <Button type="primary" onClick={handleOpenInviteUsers}>
            {intl.formatMessage({ id: 'create' })}
          </Button>
        </Space>
      </div>
      <div className={styles.content}>
        <Table columns={columns} dataSource={list} pagination={false} />
      </div>
      <CreateAccount
        visible={createVisible}
        onClose={onClose}
        onSuccess={onSuccess}
      />
    </div>
  );
}
UsermanagementPage.title = '管理使用者';
export default UsermanagementPage;
